<template>
    <div>
        <nav-bar>
            <template v-slot:default>订单列表</template>    
        </nav-bar>
        <div class="one">
            <!-- onChangeTab点击事件 -->
            <van-tabs ref="tabs" @click="onChangeTab">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="已支付"></van-tab>
                <van-tab title="发货"></van-tab>
                <van-tab title="交易完成"></van-tab>
                <van-tab title="过期"></van-tab>
            </van-tabs>
        </div>
        <div class="two">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="10"
                >
                    <div @click="goTo(item.id)" class="there" v-for="(item,index) in list" :key="index">
                        <div>
                            <span>订单号：</span>
                            <span>{{item.order_no}}</span>
                        </div>
                        <div class="th">
                            <span>创建时间：</span>
                            <span>{{item.created_at}}</span>
                        </div>

                        <van-card
                            v-for="sub in item.orderDetails.data" :key="sub.id"
                            :num = "sub.num"
                            :price = "sub.goods.price"
                            desc="全场包邮"
                            :title="sub.goods.title"
                            :thumb="sub.goods.cover_url"
                        />
                    </div>
                    
                
                </van-list>
            </van-pull-refresh>
        </div>
            
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import {reactive,ref,toRefs,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {getOrderList} from 'network/order'
export default {
    name: 'Order',
    components:{
        NavBar
    },
    setup(){
        const router = useRouter();
        const route = useRoute();
        let tabs = ref(null);
        const state = reactive({
            loading:false,
            finished:false,
            refreshing:false,
            list:[],
            page:1,
            totalPage:0,
            status:0
        })

        onMounted(()=>{
            onRefresh();
        })

        const loadData = ()=>{
            // 请求数据-列表
            getOrderList({page:state.page,status: state.status,include:'orderDetails.goods'}).then(res=>{
                state.list = state.list.concat(res.data);
                state.loading = false;
                state.totalPage = res.meta.pagination.total_pages;
                console.log(state.totalPage)
                if(state.totalPage >= state.totalPage){
                    state.finished = true;
                }          
            })
        }
        const onLoad = ()=>{
            if(!state.refreshing && state.page < state.totalPage){
                state.page = state.page +1;
            }

            if(state.refreshing){
                state.list = [];
                state.refreshing = false;
            }
            loadData();
        }
        const onRefresh =()=>{
            // 是否处于加载状态，加载过程中不触发Load
            state.refreshing = true;
            // 清空列表数据
            state.finished = false;
            // 将Loading 设置为true，表示处于加载状态
            state.loading = true;
            // 
            state.page = 1;
            onLoad();
        }
        // tab 切换
        const onChangeTab = (name)=>{
            state.status = name;
            onRefresh();
        }
        // 到订单详情页面
        const goTo = (id)=>{
            router.push({path:'/orderdetail',query:{id}});
        }
        return{
            onLoad,
            ...toRefs(state),
            onRefresh,
            tabs,
            onChangeTab,
            goTo
        }
    }
}
</script>
<style scoped lang="scss">
    .one{
        margin-top: 45px;
        font-size: 20px;
    }

    .there{
        width: 90%;
        margin: 50px  auto 30px;
        text-align: left;
        font-size: 18px;
        
        div{
            padding-left: 40px;
            margin-bottom: 15px;
        }
        .th{
            border-bottom: 1px solid gainsboro;
            padding-bottom: 20px;
        }
       
    }
</style>
